<template>
	<view class="text-white">
		<cu-custom bgColor="nav-bg-blue" :isBack="true">
			<block slot="content"> 
				{{lines.name + ' '}} {{'开往 ' + lines.carInfo[lines.index].end_stop + ' 方向'}}
			</block>
		</cu-custom>
		<view class="info_wapper">
			<view class="line_info">
				<view class="site">
					<text class="from" id="from">{{lines.carInfo[lines.index].start_stop + ' - '}}</text>
					<text class="to" id="to">{{lines.carInfo[lines.index].end_stop}}</text>
				</view>
				<view class="tit">
					<text class="time_s">首班:{{startTimeF()}}</text>
					<text class="time_e">末班:{{endTimeF()}}</text>
					<text class="price">票价:{{lines.carInfo[lines.index].basic_price + ' 元'}}</text>
				</view>
			</view>
		</view>
		<view class="distance" v-if="text.length > 0">
			<view class="distance-box">
				<view class="time" id="distance">
				  <text v-if="haveBus">距 <strong id="dis_num">{{siteNum}}</strong> 站</text>
				  <text v-else>暂无车辆</text>
				</view>
				<text class="arr">到达</text>
				<text class="next_site">{{text}}</text>
			</view>
		</view>
		<view class="site_list">
		  <view class="wapper_sitelist">
		    <view class="road" :style="{width: listWidth + 'rpx'}">
		      <view class='part' v-for="(item, index) in siteList" :key="index" @click="showActive(index, item.title)">
		        <text class="dot_p" :class="{'dot_show': ind === index}"></text>
		        <text class='dot_r'></text>
		        <view class='name'>
		          <text class='dot_d ' :style="{'backgroundColor':(lineId == item.id?'#3c92f5':'#999999')}" :class="{'dot_d_show': ind === index}">{{index+1}}</text>
		          <text class='text ' :style="{'color':(lineId == item.id?'#3c92f5':'#999999')}" :class="{'text_show': ind === index}">{{item.title}}</text>
		        </view>
		      </view>
		    </view>
		    <view class="bus_road" :style="backImage"></view>
		  </view>
		  <view id="gotomap" class="button" style="right:110rpx" @click="showMap()">
		    <image class="img" src="../../static/line/map.png" />
		    <text>地图</text>
		  </view>
		  <view class="button" style="right:0.3rem" @click="changeDirect()">
		    <image class="img" src="../../static/line/change3.png" />
		    <text>换向</text>
		  </view>
		</view>
	</view>
</template>

<script>
	import {mapState} from 'vuex'
	export default {
		data() {
			return {
				city:'淮安',
				title:'',
				listWidth:'',
				line_name: '',
				text: '',
				lineId: '',
				backImage: {
				  backgroundImage: 'url(' + require('../../static/line/bus.png') + '),url(' + require('../../static/line/bus.png') + '),url(' + require('../../static/line/bus.png') + ')',
				  backgroundPosition: '2rem,5rem,11rem',
				  width: ''
				},
				siteList:[],
				lines:[],
				haveBus: false,
				siteNum: 0
			}
		},
		computed:{
			...mapState(['akey']),
		},
		onLoad(option) {
			this.line_name = option.line_name
			this.text = option.site_name ? option.site_name:''
			this.lineId = option.id
			this.lineInfo(this.line_name)
		},
		methods: {
			startTimeF(){
				// lines.carInfo[lines.index].start_time
				let lines = this.lines.carInfo
				let stime = (typeof lines == 'undefined' || typeof lines[this.lines.index]['start_time'] == 'undefined')?'':lines[this.lines.index]['start_time']
				if(stime.length !== 0){
					return stime.substr(0, 2) + ':' + stime.substr(2, 2)
				}
				return '05:40'
			},
			endTimeF(){
				// lines.carInfo[lines.index].start_time
				let lines = this.lines.carInfo
				let etime = (typeof lines == 'undefined' || typeof lines[this.lines.index]['end_time'] == 'undefined')?'':lines[this.lines.index]['end_time']
				if(etime.length !== 0){
					return etime.substr(0, 2) + ':' + etime.substr(2, 2)
				}
				return '18:40'
			},
			lineInfo(line_name){
				let that = this
				uni.request({
					url:'https://restapi.amap.com/v3/bus/linename?s=rsv3&extensions=all&key='+this.akey+'&output=json&pageIndex=1&city='+this.city+'&offset=10&keywords='+line_name+'&platform=JS&logversion=2.0&sdkversion=1.4.17',
					method:'GET',
					success(result){
						result = JSON.parse(JSON.stringify(result))
						if(typeof result.data !== 'undefined'){
							that.lines = {
								name: line_name,
								index: 0,
								carInfo: result.data.buslines
							}
							that.listWidth = that.lines.carInfo[that.lines.index].busstops.length * 70
							that.backImage.width = that.listWidth + 'rpx'
							that.combinLineList(that.lines.carInfo[that.lines.index].busstops)
						}
						if(typeof result.buslines !== 'undefined'){
							that.lines = {
								name: line_name,
								index: 0,
								carInfo: result.buslines
							}
							that.listWidth = that.lines.carInfo[that.lines.index].busstops.length * 70
							that.backImage.width = that.listWidth + 'rpx'
							that.combinLineList(that.lines.carInfo[that.lines.index].busstops)
						}
					}
				})
			},
			combinLineList(via_stops){
				let that = this
				that.siteList = []
				via_stops.forEach((item,index) => {
					let location_arr = item.location.split(',')
					if(this.lineId == item.id){
						this.text = item.name
					}
					let iconPath = index == 0 ? '../../static/line/4.png':'../../static/line/site.png'
					if(index == via_stops.length - 1){
						iconPath = '../../static/line/end.png'
					}
					that.siteList.push({
						id: item.id,
						title: item.name,
						iconPath: iconPath,
						width: '40rpx',
						height: '40rpx',
						latitude: location_arr[1],
						longitude: location_arr[0]
					})
				})
			},
			changeDirect(){
				let item_index = this.lines.index
				let that = this
				this.lines.index = (item_index == 0?1:0)
				that.listWidth = that.lines.carInfo[that.lines.index].busstops.length * 70
				that.backImage.width = that.listWidth + 'rpx'
				that.combinLineList(that.lines.carInfo[that.lines.index].busstops)
			},
			showActive(index,site_name){
				
			},
			showMap(){
				let lines = this.lines.carInfo[this.lines.index]
				uni.navigateTo({
					url:'/pages/home/map?site='+JSON.stringify(this.siteList)+'&polyline='+lines.polyline
				})
			}
		}
	}
</script>

<style>
.info_wapper {
  height: 130rpx;
  background: #36A3F9;
  padding: 20rpx;
}

.site {
  font-size: 36rpx;
  color: #fff;
  margin-bottom: 10rpx;
  text-align: left;
}

.site text {
  width: 40%;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.from {
  padding-left: 25rpx;
  background: url(../../static/line/position2.png) no-repeat left;
  background-size: 20rpx auto;
}

.tit {
  color: #fff;
  font-size: 28rpx;
  padding-left: 25rpx;
  margin-bottom: 6.4rpx;
  height: 40rpx;
}

.tit text {
  float: left;
  margin-right: 10rpx;
}

.distance {
  height: 135rpx;
  background: #36A3F9;
  font-size: 28rpx;
  color: #B7BABB;
  line-height: 110rpx;
  text-align: center;
}

.distance .distance-box{
	background: #fff;
	width: 96%;
	margin: 0 auto;
	padding-bottom: 10rpx;
	border-radius: 10rpx;
}

.distance .distance-box .time {
  float: left;
  width: 40%;
  font-size: 0.26*16*2rpx;
  height: 1.3*16*2rpx;
  line-height: 1.3*16*2rpx;
}

.distance .distance-box .time strong {
  font-size: 0.32*16*2rpx;
  color: #353738;
}

.distance .distance-box .arr {
  float: left;
  width: 20%;
  font-size: 0.26*16*2rpx;
}

.distance .distance-box .next_site {
  width: 40%;
  font-size: 0.32*16*2rpx;
  color: #353738;
  text-overflow: ellipsis;
  line-height: 0.4*16*2rpx;
  display: inline-block;
  vertical-align: middle;
}




/*站点列表*/

.site_list {
  width: 100%;
  height: 100%;
  position: relative;
  padding-top: 20rpx;
}

.site_list .button {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  background: #fff;
  position: absolute;
  top: 20rpx;
  font-size: 28rpx;
  color: #36A3F9;
  text-align: center;
}

.site_list .bus_road {
  height: 0.28*16*2rpx;
  background-repeat: no-repeat;
  background-size: 0.48*16*2rpx 0.24*16*2rpx;
  position: absolute;
  top: 0.3*16*2rpx;
  left: 0;
  z-index: 1001;
}

.site_list .button text {
  transform: scale(0.7);
  display: block;
}

.site_list .button .img {
  width: 20rpx;
  height: 20rpx;
  display: block;
  margin: 0 auto;
  margin-top: 20rpx;
}

.site_list .wapper_sitelist {
  width: 100%;
  overflow-x: scroll;
  position: relative;
  -webkit-overflow-scrolling: touch;
}

.wapper_sitelist::-webkit-scrollbar {
  display: none;
}

.site_list .road {}

.site_list .part {
  width: 70rpx;
  float: left;
  padding: 0 20rpx;
}

.site_list .dot_p {
  width: 70rpx;
  height: 20rpx;
  display: block;
}

.site_list .dot_show {
  background: url(../../static/line/position_red.png) no-repeat center;
  background-size: 20rpx 20rpx;
}

.site_list .dot_r {
  width: 70rpx;
  height: 20rpx;
  background: url(../../static/line/road.png) no-repeat center;
  background-size: 100%;
  margin-top: 100rpx;
  display: block;
}

.site_list .name {
  width: 32rpx;
  margin: auto;
}

.site_list .dot_d {
  width: 32rpx;
  height: 32rpx;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  background: #B3B3B3;
  display: block;
  float: right;
  color: #FFFFFF;
  text-align: center;
  font-size: 10px;
  line-height: 32rpx;
}

.site_list .dot_d_show {
  background: #F0585D;
}

.site_list .text_show {
  color: #F0585D;
}

.site_list .text {
  font-size: 28rpx;
  width: 32rpx;
  margin-top: 10rpx;
  float: right;
  color: #333;
}

</style>
